<template>
  <div class="bady-sty">
    <el-tabs type="border-card">
    <el-tab-pane label="成员详情">
      <div style="border-bottom: 4px solid #EEF2F6;">
        <div style="font-weight: 600;">成员数据概括</div>
        <div style="margin-top: 20px;">
          <span>选择日期：</span>
          <span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :size="size"
            />
          </span>
        </div>
        <div style="width: 40%;margin-top: 20px;padding-bottom: 30px;">
          <div class="top-label">
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">任务总数</div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">已完成任务数</div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">未完成任务数</div>
            </div>
            <div class="label-lists">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">当前客户数</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div style="font-weight: 600;margin-top: 20px;">成员数据概括</div>
        <div style="margin-top: 20px;display: inline-block">
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              
              <el-form-item label="成员">
                <el-select v-model="formInline.region" placeholder="请选择成员">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="选择日期">
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                    :size="size"
                  />
              </el-form-item>
              </el-form>
          </div>
        </div>
        <div style="float: right;margin-top: 20px;">
          <el-button>全部提醒</el-button>
          <el-button>导出Excel</el-button>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="成员" width="180" />
          <el-table-column prop="name" label="执行客户数" width="180" />
          <el-table-column prop="address" label="已完成任务数" />
          <el-table-column prop="address" label="未完成任务数" />
          <el-table-column prop="address" label="任务完成率" />
        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="客户详情">
      <div style="border-bottom: 4px solid #EEF2F6;">
        <div style="font-weight: 600;">客户数据概括</div>
        <div style="margin-top: 20px;">
          <span>选择日期：</span>
          <span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :size="size"
            />
          </span>
        </div>
        <div style="width: 40%;margin-top: 20px;padding-bottom: 30px;">
          <div class="top-label">
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">任务总数</div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">已完成任务数</div>
            </div>
            <div class="label-list">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">未完成任务数</div>
            </div>
            <div class="label-lists">
              <div style="font-size: 24px;">0</div>
              <div style="color:#717273">当前客户数</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div style="font-weight: 600;margin-top: 20px;">客户数据列表</div>
        <div style="margin-top: 20px;display: inline-block">
          <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              
              <el-form-item label="搜索客户">
                <el-input
                  v-model="input1"
                  class="w-50 m-2"
                  placeholder="Pick a date"
                  :suffix-icon="Search"
                />
              </el-form-item>
              <el-form-item label="推送成员">
                <el-select v-model="formInline.region" placeholder="请选择成员">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              </el-form>
          </div>
        </div>
        <div style="float: right;margin-top: 20px;">
          <el-button>全部提醒</el-button>
          <el-button>导出Excel</el-button>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="客户" width="180" />
          <el-table-column prop="name" label="推送成员" width="180" />
          <el-table-column prop="address" label="已推送消息数" />
          <el-table-column prop="address" label="未推送消息数" />
          <el-table-column prop="address" label="操作" />
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>
<script setup>
import { ref,reactive } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRoute()
const formInline = reactive({
  user: '',
  region: '',
})
const id = ref(router.query.id)
console.log(id.value)
</script>
<style>
.bady-sty{
  margin: 15px;
  padding: 15px;
  background-color: #fff;
}
.top-label{
  border: 1px solid #DAEDFF;
  padding: 20px 40px;
  background-color: #FBFDFF;
  margin-top: 15px;
  border-radius: 5px;
}
.label-list{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
  border-right: 1px solid #e9e9eb;
  /* line-height: 70px; */
}
.label-lists{
  width: 25%;
  height: 70px;
  display: inline-block;
  color: black;
  text-align: center;
}
</style>